<template>
   <div class="user-center">
       <div class="left">
           <div class="header">
               <el-upload
                    action="http://otc.xmobject.com/api/user/avatar"
                    :show-file-list="false"
                    :headers='headers'
                    name='img'
                    :on-success="handleAvatarSuccess">
                    <img v-if="$store.state.userInfo.avatar" :src="$store.state.userInfo.avatar" class="avatar" style="width : 46px;height : 46px;border-radius : 50%">
                    <div class="avatar" v-else>
                        UG
                    </div>
                </el-upload>
                <span class="user-name">{{$store.state.userInfo.nickname}}</span>
                <i class="el-icon-edit" @click='changeNickName' style="cursor:pointer"></i>
                <router-link tag='i' to='/user-info' class="el-icon-arrow-right" style="cursor:pointer"></router-link>
                <!-- <i class="el-icon-arrow-right"></i> -->
           </div>
           <ul class="info">
               <li>場外交易次數：{{$store.state.userInfo.trade_times}}</li>
               <!-- <li>場外交易量：0 BTC</li> -->
               <li>被信任數：{{$store.state.userInfo.trust_number}}</li>
               <li>註冊時間：{{$store.state.userInfo.created_at}}</li>
               <li>首次交易時間：{{$store.state.userInfo.first_traded_at}}</li>
           </ul>
        </div>
        <div class="right">
           <div class="top">
                <h1>帳戶安全</h1>
                <ul class="account-info">
                        <li>
                            <span>手機</span>
                            <span>{{$store.state.userInfo.telephone}}</span>
                            <span>提現，修改密碼，以及安全設置時用以收取簡訊驗證</span>
                            <span>
                                <el-button type='text' v-if='$store.state.userInfo.telephone'>
                                    <router-link tag='span' to='/change-telephone'>修改</router-link>
                                </el-button>
								<el-button v-else type='text' @click='bindStart(0)'>
									綁定
								</el-button>
                            </span>
                        </li>
                        <li>
                            <span>電子郵箱</span>
                            <span>
                                <span v-if='!$store.state.userInfo.email'>未綁定</span>
                                <span v-else>{{$store.state.userInfo.email}}</span>
                            </span>
                            <span>用於登入、提幣、修改安全設置時輸入</span>
                            <span>
                                <el-button type='text' v-if='!$store.state.userInfo.email' @click='bindStart(1)'>
                                   綁定
                                </el-button>
                                <el-button type='text' v-else>
                                    <router-link tag='span' to='/change-email'>修改</router-link>
                                </el-button>
                            </span>
                        </li>
                        <li>
                            <span>登入密碼</span>
                            <span>******</span>
                            <span>用於登入帳戶時輸入</span>
                            <span>
                                <el-button type='text'>
                                    <router-link tag='span' to='/fixed-login-pwd'>修改</router-link>
                                </el-button>
                            </span>
                        </li>
                        <li>
                            <span>資金密碼</span>
                            <span>未設定</span>
                            <span>提現、修改安全設置時輸入</span>
                            <span>
                                <el-button type='text' v-if='$store.state.userInfo.is_trade_password == 0'>
                                    <router-link tag='span' to='/set-trade-pwd'>設定</router-link>
                                </el-button>
                                <el-button type='text' v-if='$store.state.userInfo.is_trade_password == 1'>
                                    <router-link tag='span' to='/change-trade-pwd'>修改</router-link>
                                </el-button>
                            </span>
                        </li>
                </ul>
           </div>
           <!-- 实名认证 -->
           <div class="smrz">
               <h1>實名認證</h1>
               <p>
                    <span>實名認證有助於保護您的帳戶安全和提高交易限額</span>
                    <el-button type='text' @click="$router.push('/auth-country')" v-if='$store.state.userInfo.auth_status == 0'>
                        未認證
                    </el-button>
                    <el-button type='text' v-if='$store.state.userInfo.auth_status == 1'>
                        已認證
                    </el-button>
               </p>
           </div>
        </div>
        <el-dialog
            title='修改昵稱'
            width = '30%'
			:close-on-click-modal='false'
            :visible.sync="showChangeNickDialog">
            <el-input v-model="nick_name" placeholder="請輸入昵稱"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="changeNickCancel">取 消</el-button>
                <el-button type="primary" @click="changeNickConfirm">确 定</el-button>
            </span>
        </el-dialog>
		<el-dialog
			title='綁定手機'
			width='30%'
			:close-on-click-modal='false'
			:visible.sync="showBindTelDialog">
			<el-select v-model='bindTelFormData.nation_id'>
			    <el-option 
			        v-for='item in $store.state.nation' 
			        :key='item.id' 
			        :label='`${item.title}-${item.code}`' 
			        :value='item.id'></el-option>
			</el-select>
			<el-input placeholder='請輸入手機號碼' v-model='bindTelFormData.telephone'>
				<el-button slot="append" type='text' style='font-size:14px;width:140px;' @click='getCode' :disabled="disabled">{{code_btn_text}}</el-button>
			</el-input>
			<el-input placeholder='請輸入驗證碼' v-model='bindTelFormData.code'></el-input>
			<span slot="footer" class="dialog-footer">
			    <el-button @click="bindTelCancel">取 消</el-button>
			    <el-button type="primary" @click="bindTelConfirm">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog
			title='綁定郵箱'
			width='30%'
			:close-on-click-modal='false'
			:visible.sync="showBindEmailDialog">

			<el-input placeholder='請輸入郵箱地址' v-model='bindTelFormData.email'>
				<el-button slot="append" type='text' style='font-size:14px;width:140px;' @click='getCode' :disabled="disabled">{{code_btn_text}}</el-button>
			</el-input>
			<el-input placeholder='請輸入驗證碼' v-model='bindTelFormData.code'></el-input>
			<span slot="footer" class="dialog-footer">
			    <el-button @click="bindEmailCancel">取 消</el-button>
			    <el-button type="primary" @click="bindEmailConfirm">确 定</el-button>
			</span>
		</el-dialog>
   </div>
</template>

<script>
    import { UserUpdate, GetUserIndex, BindNewTel, BindMail } from '@/api/user'
	import {GetTelephoneCode, GetEmailCode} from '@/api/common'
    export default {
        data() {
            return {
                showChangeNickDialog : false,//是否显示修改昵称dialog
                nick_name : null,//昵称
                headers : {
                    "authorization":this.$store.state.userInfo.authorization
                },
				bindTelFormData :{
					nation_id : null,
					telephone : null,
					code : null,
					email : null
				},
				bindType : null,
				showBindTelDialog : false,
				disabled : false,
				code_btn_text : '發送驗證碼',
				time_count : 60,
				showBindEmailDialog : false,
            };
        },
        created () {
            GetUserIndex({}).then(res => {
                this.$store.commit('setUserInfo', res.result)
            })
        },
        methods : {
            changeNickName () {
                this.showChangeNickDialog = true
            },
            //取消修改昵称
            changeNickCancel() {
                this.nick_name = null;
                this.showChangeNickDialog = false;
            },
            //修改昵称确认
            changeNickConfirm () {
                if (!this.nick_name) {
                    this.$alert('請輸入昵稱', '提示')
                    return;
                }
                UserUpdate ({
                    update_type : 'nickname',
                    nickname : this.nick_name
                }).then(res => {
                    this.$store.commit('updateUserInfo', {
                        key : 'nickname',
                        value : this.nick_name
                    })
                    this.$message({
                        message : '修改成功',
                        type : 'success'
                    })
                    this.nick_name = null;
                    this.showChangeNickDialog = false;
                })
            },
            handleAvatarSuccess (response) {
                if (response.code == 200) {
                    this.$store.commit('updateUserInfo', {
                        key : 'avatar',
                        value : response.result.avatar
                    })
                    this.$message({
                        message : '上傳成功',
                        type : 'success'
                    })
                } else {
                    this.$message({
                        message : '上傳失敗',
                        type : 'error'
                    })
                }
            },
			bindStart (type) {
				this.binidType = type;
				if (type == 0) {
					this.showBindTelDialog = true;
				} else {
					this.showBindEmailDialog = true;
				}
				
				
			},
			getCode (){
				if (this.bindType == 0 && !this.bindTelFormData.telephone) {
				    this.$alert('請輸入手機號碼', '提示');
				    return;
				}
				if (this.bindType == 1 && !this.bindTelFormData.email) {
				    this.$alert('請輸入郵箱地址', '提示');
				    return;
				}
				
				if (this.bindType == 0) {
					GetTelephoneCode({
					    record_type : 'first_bind',
					    telephone : this.bindTelFormData.telephone,
					    nation_id : this.bindTelFormData.nation_id
					}).then(res =>{
					    this.disabled = true;
					    this.$message({
					        message : '驗證碼發送成功',
					        type : 'success'
					    })
					    this.timeCountHandle()
					})
				} else {
					let emailReg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
					if (!emailReg.test(this.bindTelFormData.email)) {
						this.$alert('請輸入合法的郵箱地址', '提示')
						return;
					}
					GetEmailCode({
						record_type : 'first_bind',
						email : this.bindTelFormData.email
					}).then(res =>{
					    this.disabled = true;
					    this.$message({
					        message : '驗證碼發送成功',
					        type : 'success'
					    })
					    this.timeCountHandle()
					})
				}
				
				
			},
			//计时函数
			timeCountHandle () {
			    this.time_count -= 1;
			    this.code_btn_text = `${this.time_count}s後重新發送`;
			    setTimeout(_ => {
			        if (this.time_count <= 0) {
			            this.disabled = false;
			            this.time_count = 10;
			            this.code_btn_text = `重新發送`
			        } else {
			            this.timeCountHandle();
			        }
			    }, 1 *1000)
			},
			bindTelCancel () {
				this.bindTelFormData = {
					nation_id : null,
					telephone : null,
					code : null,
					email : null
				}
				this.showBindTelDialog = false;
			},
			bindTelConfirm () {
				BindNewTel(this.bindTelFormData).then(_ => {
					this.$message({
					    message : '手機號碼綁定成功',
					    type : 'success'
					})
					this.bindTelCancel();
					GetUserIndex({}).then(res => {
					    this.$store.commit('setUserInfo', res.result)
					})
				})
			},
			bindEmailCancel () {
				this.bindTelFormData = {
					nation_id : null,
					telephone : null,
					code : null,
					email : null
				}
				this.showBindEmailDialog = false;
			},
			bindEmailConfirm () {
				BindMail(this.bindTelFormData).then(_ => {
					this.$message({
					    message : '郵箱綁定成功',
					    type : 'success'
					})
					this.bindEmailCancel();
					GetUserIndex({}).then(res => {
					    this.$store.commit('setUserInfo', res.result)
					})
				})
			}
			
        }
    }
</script>
<style lang="less" scoped>
    @import url('../../assets/css/_b.less');
    @media screen and (max-width : 670px) {
        .left {
            width: 80%;
            background: #fff;
            padding: 15px 5%;
            margin: 15px auto ;
            .header {
                border-bottom: 1px solid #e6e9ec;
                padding-bottom: 30px;
                .s-b();
                .avatar {
                    width: 46px;
                    height: 46px;
                    line-height: 46px;
                    background: @mainColor;
                    color: #fff;
                    border-radius: 50%;
                    font-size: 20px;
                    margin-right: 10px;
                }
                .user-name {
                    font-size: 14px;
                    color: #092a44;
                    display: block;
                    max-width: 112px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                i {
                    display: inline-block;
                    font-size: 18px;
                    color: @mainColor;
                }
                
            }
            .info {
                font-size: 14px;
                color: #707987;
                li {
                    margin-top: 20px;
                }
            }
        }
        .right {
            width: 80%;
            background: #fff;
            padding: 15px 5%;
            margin: 0 auto 40px;
            h1 {
                font-family: 'Cabin','PingFang SC',sans-serif;
                font-size: 20px;
                line-height: normal;
                letter-spacing: normal;
                color: #092a44;
                margin-bottom: 24px;
                font-weight: bold;
            }
            .account-info {
                li {
                    border-top: 1px solid #e6e9ec;
                    color: #092a44;
                    font-size: 15px;
                    padding: 10px 0;
                    span {
                        
                    }
                    span:nth-child(1) {
                        display: inline-block;
                        width: 50%;
                        margin-bottom: 10px;
                    }
                    span:nth-child(2) {
                        display: inline-block;
                        width: 50%;
                    }
                    span:nth-child(3) {
                        font-size: 13px;
                        color: #707987;
                        display: inline-block;
                        width: 100%;
                        margin-bottom: 10px;
                    }
                    span:nth-child(4) {
                        display: inline-block;
                        width: 100%;
                        .el-button {
                            padding: 0;
                        }
                    }
                }
            }
            .smrz {
                // padding: 15px;
                // margin-top: 40px;
                padding-top: 10px;
                background: #fff;
                border-top: 1px solid #e6e9ec;
                
                h1 {
                    font-family: 'Cabin','PingFang SC',sans-serif;
                    font-size: 20px;
                    line-height: normal;
                    letter-spacing: normal;
                    color: #092a44;
                    margin-bottom: 10px;
                    font-weight: bold;
                }
                p {
                    font-size: 14px;
                    color: #092a44;
                    // .s-b()
                    span {
                        display: inline-block;
                    }
                }
            }
        }
    }
    @media screen and (min-width : 670px) {
        .user-center {
            width: 1200px;
            margin: 70px auto 70px;
            // 
            .f-s();
            align-items: flex-start;
            .left {
                width: 180px;
                padding: 20px 20px 43px 20px;
                background-color: #ffffff;
                box-shadow: 0 4px 10px 0 rgba(225, 234, 240, 0.5);
                font-family: PingFang SC, sans-serif;
                .header {
                    border-bottom: 1px solid #e6e9ec;
                    padding-bottom: 30px;
                    .s-b();
                    .avatar {
                        width: 46px;
                        height: 46px;
                        line-height: 46px;
                        background: @mainColor;
                        color: #fff;
                        border-radius: 50%;
                        font-size: 20px;
                        margin-right: 10px;
                    }
                }
                .user-name {
                    font-size: 14px;
                    color: #092a44;
                    display: block;
                    max-width: 112px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                i {
                    display: inline-block;
                    font-size: 18px;
                    color: @mainColor;
                }
                .info {
                    font-size: 13px;
                    color: #707987;
                    li {
                       margin-top: 20px;
                    }
                }
            }
            .right {
                flex: 1;
                margin-left: 30px;
                
                .top {
                    background: #fff;
                    padding: 30px;
                    h1 {
                        font-family: 'Cabin','PingFang SC',sans-serif;
                        font-size: 20px;
                        line-height: normal;
                        letter-spacing: normal;
                        color: #092a44;
                        margin-bottom: 24px;
                        font-weight: bold;
                    }
                    .account-info {
                        li {
                            .s-b();
                            border-top: 1px solid #e6e9ec;
                            color: #092a44;
                            font-size: 15px;
                            padding: 10px 0;
                            span {
                                text-align: left;
                            }
                            span:nth-child(1) {
                                // flex: 1;
                                width: 150px;
                            }
                            span:nth-child(2) {
                                // flex: 1;
                                width: 200px;
                            }
                            span:nth-child(3) {
                                // flex: 3;
                                width: 350px;
                            }
                            span:nth-child(4) {
                                flex: 1;
                                text-align: right;
                                // width: 350px;
                            }
                        }
                    }
                }
                .smrz {
                    padding: 30px;
                    margin-top: 40px;
                    background: #fff;
                    h1 {
                        font-family: 'Cabin','PingFang SC',sans-serif;
                        font-size: 20px;
                        line-height: normal;
                        letter-spacing: normal;
                        color: #092a44;
                        margin-bottom: 10px;
                        font-weight: bold;
                    }
                    p {
                        font-size: 14px;
                        color: #092a44;
                        .s-b()
                    }
                }
            }
        }
    }
</style>